<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>太阳系模拟</title>
    <style>
        body {
            margin: 0;
            overflow: hidden;
            background: #000;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
        }
        canvas {
            border: 1px solid #333;
        }
        .controls {
            position: fixed;
            top: 20px;
            left: 20px;
            background: rgba(255, 255, 255, 0.1);
            padding: 10px;
            border-radius: 5px;
            color: white;
        }
        button {
            background: #4CAF50;
            border: none;
            color: white;
            padding: 5px 10px;
            margin: 5px;
            cursor: pointer;
            border-radius: 3px;
        }
        button:hover {
            background: #45a049;
        }
    </style>
</head>
<body>
    <div class="controls">
        <button onclick="togglePause()">暂停/继续</button>
        <button onclick="resetSimulation()">重置</button>
        <div>速度: <input type="range" min="0.1" max="5" step="0.1" value="1" onchange="setSpeed(this.value)"></div>
    </div>
    <canvas id="solarSystem"></canvas>

    <script>
        const canvas = document.getElementById('solarSystem');
        const ctx = canvas.getContext('2d');
        
        // 设置画布大小
        function resizeCanvas() {
            canvas.width = window.innerWidth * 0.8;
            canvas.height = window.innerHeight * 0.8;
        }
        resizeCanvas();
        window.addEventListener('resize', resizeCanvas);

        // 天体数据
        const bodies = [
            { name: '太阳', color: '#FFD700', radius: 30, distance: 0, speed: 0, angle: 0 },
            { name: '水星', color: '#A0522D', radius: 5, distance: 60, speed: 0.04, angle: 0 },
            { name: '金星', color: '#DEB887', radius: 8, distance: 90, speed: 0.03, angle: 0 },
            { name: '地球', color: '#4169E1', radius: 10, distance: 120, speed: 0.02, angle: 0 },
            { name: '火星', color: '#CD5C5C', radius: 7, distance: 150, speed: 0.015, angle: 0 },
            { name: '木星', color: '#DAA520', radius: 20, distance: 200, speed: 0.01, angle: 0 },
            { name: '土星', color: '#F4A460', radius: 17, distance: 250, speed: 0.008, angle: 0 },
            { name: '天王星', color: '#87CEEB', radius: 12, distance: 300, speed: 0.006, angle: 0 },
            { name: '海王星', color: '#1E90FF', radius: 11, distance: 350, speed: 0.005, angle: 0 }
        ];

        let isPaused = false;
        let speed = 1;

        function setSpeed(value) {
            speed = parseFloat(value);
        }

        function togglePause() {
            isPaused = !isPaused;
        }

        function resetSimulation() {
            bodies.forEach(body => {
                body.angle = 0;
            });
        }

        function drawBody(body) {
            ctx.beginPath();
            ctx.arc(body.x, body.y, body.radius, 0, Math.PI * 2);
            ctx.fillStyle = body.color;
            ctx.fill();
            ctx.strokeStyle = '#fff';
            ctx.stroke();
            
            // 绘制天体名称
            ctx.fillStyle = '#fff';
            ctx.font = '12px Arial';
            ctx.textAlign = 'center';
            ctx.fillText(body.name, body.x, body.y - body.radius - 5);
        }

        function drawOrbit(body) {
            if (body.distance === 0) return;
            ctx.beginPath();
            ctx.arc(canvas.width/2, canvas.height/2, body.distance, 0, Math.PI * 2);
            ctx.strokeStyle = 'rgba(255, 255, 255, 0.1)';
            ctx.stroke();
        }

        function update() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            
            // 绘制所有轨道
            bodies.forEach(drawOrbit);

            // 更新和绘制所有天体
            bodies.forEach(body => {
                if (body.distance > 0) {
                    if (!isPaused) {
                        body.angle += body.speed * speed;
                    }
                    body.x = canvas.width/2 + Math.cos(body.angle) * body.distance;
                    body.y = canvas.height/2 + Math.sin(body.angle) * body.distance;
                } else {
                    body.x = canvas.width/2;
                    body.y = canvas.height/2;
                }
                drawBody(body);
            });

            requestAnimationFrame(update);
        }

        update();
    </script>
</body>
</html> 